<template>
    <!--pass 0 交易密码  1为登录密码-->
    <div class="fogetpass-view youke">
        <van-nav-bar
                :title="$route.query.pass==0?'找回交易密码':'找回登录密码'"
                left-arrow
                fixed
                @click-left="onBack()"
        />
        <Main>
            <template slot="main">
                <div class="inputs-group">
                    <van-cell-group>
                        <van-field
                                v-model="requestParam.mobile"
                                required
                                clearable
                                type="number"
                                maxlength="11"
                                label="手机号"

                                placeholder="请输入手机号"
                        />
                        <van-field
                                v-model="requestParam.yzm"
                                required
                                center
                                clearable
                                type="number"
                                label="验证码"
                                placeholder="请输入短信验证码"
                        >
                            <van-button
                                    slot="button"
                                    size="small"
                                    type="primary"
                                    :disabled="requestParam.mobile==''"
                                    @click="yzmFun"
                            >{{mobilesendText}}
                            </van-button>
                        </van-field>
                    </van-cell-group>
                </div>
                <div class="inputs-group">
                    <van-cell-group>
                        <van-field
                                v-model="requestParam.newPass"
                                type="password"
                                label="新密码"
                                :placeholder="$route.query.pass==0?'请输入新交易密码':'请输入新登录密码'"
                                required
                        />
                        <van-field
                                v-model="checkPass"
                                type="password"
                                label="确认密码"
                                :placeholder="$route.query.pass==0?'请再次输入新交易密码':'请再次输入新登录密码'"
                                required
                        />
                    </van-cell-group>
                    <div class="tips">*温馨提示：验证码将会发送到注册时的手机号，请注意查看；请记住新设置的密码，不要告知他人，以保证账户的安全。</div>
                    <div class="btn-view" @click="sendFun">提交</div>
                </div>
            </template>
        </Main>
    </div>
</template>

<script type="text/ecmascript-6">
    import {user} from "@/api";
    import {check} from "@/ext/check";

    export default {
        //接收父级传递的参数
        props: [],
        //监听数据变化
        watch: {},
        data() {
            return {
                requestParam: {
                    mobile: "",
                    yzm: "",
                    newPass: ""
                },
                mobilesend: true,
                mobilesendText: "发送验证码",
                times: null,
                timesText: 60,
                checkPass: ""
            };
        },
        //实例初始化之前触发事件
        beforeCreate() {
        },
        //实例化之后触发事件
        created() {
        },
        //实时监控data参数数据变化
        computed: {},
        //模板组件
        components: {},
        //执行方法
        methods: {
            // 发送验证码
            sendCodeFun() {
            },
            //提交
            sendFun() {
                if (!check.mobile(this.requestParam.mobile)) {
                    this.$toast.fail("手机号码输入不正确");
                    return;
                }
                if (!this.requestParam.newPass) {
                    this.$toast.fail(
                        `${
                            this.$route.query.pass == 0
                                ? "交易密码不能为空"
                                : "登录密码不能为空"
                            }`
                    );
                    return;
                }
                if (!this.checkPass) {
                    this.$toast.fail(
                        `${
                            this.$route.query.pass == 0
                                ? "确认交易密码不能为空"
                                : "确认登录密码不能为空"
                            }`
                    );
                    return;
                }
                if (!this.checkPass) {
                    this.$toast.fail(`两次密码不一致`);
                    return;
                }
                let _data = {
                    mobile: this.requestParam.mobile,
                    code: this.$route.query.pass == 0 ? "" : this.requestParam.newPass,
                    passwo: this.$route.query.pass == 0 ? this.requestParam.newPass : "",
                    yzm: this.requestParam.yzm
                };
                user.findpass(_data).then(res => {
                    if (res.code == 1000) {
                        let that = this;
                        this.$toast.success(res.reason);
                        setTimeout(function () {
                            that.$router.push('/user/login')
                        }, 1000)
                    }
                });
            },
            yzmFun() {
                if (this.mobilesend) {
                    this.mobilesend = false;
                    user.loginyzm({tel: this.requestParam.mobile}).then(res => {
                        if (res.code == 1000) {
                            this.timesfun();
                        } else {
                            this.mobilesend = true;
                            this.$toast.fail(res.reason);
                        }
                    });
                } else {
                }
            },
            timesfun() {
                let self = this;
                self.mobilesendText = `${self.timesText}s`;
                let times = setInterval(function () {
                    self.timesText--;
                    self.mobilesendText = `${self.timesText}s`;
                    if (self.timesText <= 0) {
                        self.mobilesend = true;
                        self.mobilesendText = "发送验证码";
                        self.timesText = 60;
                        window.clearInterval(times);
                    }
                }, 1000);
            }
        },
        mounted() {
        }
        //路由退出时候调用
        //beforeRouteLeave(to, from, next){next()}
    };
</script>

<style scoped lang="less">
    .inputs-group {
        .tips {
            padding: 1rem 2rem;
            color: #666666;
        }

        .btn-view {
            width: 90%;
            height: 2.675rem;
            line-height: 2.675rem;
            text-align: center;
            color: #fff;
            background: #4684fe;
            margin: 0 auto;
            border-radius: 4px;
        }

        .code-btn {
            color: #4684fe;
            position: relative;

            &::after {
                position: absolute;
                content: "";
                border-left: 1px solid #999999;
                height: 1rem;
                left: -0.6rem;
                top: 0.275rem;
            }
        }
    }
</style>
